<template>
  <div class="steps">
    <h3 class="edit-title" v-if="revise">
      <span>{{
        editTitle == "basicinfo"
          ? "修改基本信息"
          : editTitle == "signup"
          ? "修改佐证资料"
          : "修改报名信息"
      }}</span>
    </h3>
    <template v-else>
      <div
        class="step step1"
        :class="{
          active: step == '1',
          over: step != '1',
          hidden: step == '2',
          pointer: stuList.step == 1 || stuList.step == 2
        }"
        @click="goStep('1')"
      >
        <!-- <span class="step-icon">1.</span>  -->
        <span class="step-text">基本信息</span>
      </div>
      <div
        class="step step2"
        :class="{
          active: step == '2',
          over: step == '3',
          hidden: step == '1',
          pointer: stuList.step == 2
        }"
        @click="goStep('2')"
      >
        <!-- <span class="step-line"></span> -->
        <!-- <span class="step-icon">2.</span> -->
        <span class="step-text">佐证资料</span>
      </div>
      <div class="step step3" :class="{ active: step == '3' }">
        <!-- <span class="step-line"></span> -->
        <!-- <span class="step-icon">3.</span> -->
        <span class="step-text">在线报名</span>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: "Steps",
  props: {
    step: {
      type: Number,
      default: 1
    },
    revise: {
      type: Boolean,
      default: false
    },
    editTitle: {
      type: String
    }
  },
  data() {
    return {};
  },
  computed: {
    stuList() {
      return this.$store.state.stuList;
    }
  },
  methods: {
    goStep(step) {
      if (step == "1") {
        this.$router.push({ path: "/basicinfo" });
      } else if (step == "2") {
        if (this.step == "3") {
          this.$router.push({ path: "/signup" });
        }
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.steps {
  // height: 150px;
  padding: 32px 0 30px;
  // background: url(../assets/images/steps_bg.png) no-repeat;
  //   background-size: 100%;
  //   font-size: 0;
  box-sizing: border-box;
  text-align: left;
  .step {
    display: inline-block;
    height: 80px;
    line-height: 80px;
    font-size: 36px;
    border: 1px solid #0195ff;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    background-color: #fff;
    padding-left: 15px;
    color: #222;
    &.active {
      background-color: #0195ff;
      color: #fff;
      &::after {
        background-color: #0195ff;
        z-index: 2;
      }
    }
    &.over {
      color: #0195ff;
    }
    &.pointer {
      cursor: pointer;
    }
    &.hidden {
      &::after {
        display: none;
      }
      &::before {
        display: none;
      }
    }
  }
  .step1 {
    width: 236px;
    border-right: none;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    &::after {
      content: "";
      width: 53px;
      height: 54px;
      border: 1px solid;
      position: absolute;
      top: 10px;
      right: -28px;
      border-top-right-radius: 15px;
      transform: rotate(45deg);
      border-color: #0195ff #0195ff transparent transparent;
    }
  }
  .step2 {
    width: 242px;
    border-left: none;
    border-right: none;
    padding-left: 35px;
    &::before {
      content: "";
      width: 53px;
      height: 54px;
      border: 1px solid;
      position: absolute;
      top: 10px;
      left: -27px;
      border-top-right-radius: 15px;
      transform: rotate(45deg);
      border-color: #0195ff #0195ff transparent transparent;
    }
    &.active {
      &::before {
        background-color: #fff;
      }
    }
    &.active + .step3 {
      &::before {
        background-color: #0195ff;
      }
    }
  }
  .step3 {
    width: 252px;
    border-left: none;
    padding-left: 30px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    &::before {
      content: "";
      width: 52px;
      height: 56px;
      border: 1px solid;
      position: absolute;
      top: 9px;
      left: -26px;
      border-top-right-radius: 15px;
      transform: rotate(45deg);
      border-color: #0195ff #0195ff transparent transparent;
    }
    &.active {
      &::before {
        background-color: #fff;
      }
    }
  }
  .edit-title {
    margin-top: -32px;
    height: 80px;
    line-height: 80px;
    font-size: 36px;
    text-align: center;
    color: #fff;
    background: url(../assets/images/bg-xiugai.png);
    width: 105%;
    margin-left: -10px;
    span {
      position: relative;
      // display: inline-block;
      &::before {
        position: absolute;
        top: 10px;
        left: -40px;
        content: "";
        width: 28px;
        height: 28px;
        background: url(~@/assets/images/pic_btzs.png) no-repeat center/cover;
      }
      &::after {
        position: absolute;
        top: 10px;
        right: -40px;
        content: "";
        width: 28px;
        height: 28px;
        background: url(~@/assets/images/pic_btzs.png) no-repeat center/cover;
      }
    }
  }
}
</style>
